<script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
<div id="app">
    <!-- 输入框 -->
    这是一个输入框: <input type="text" v-model="shu" />{{shu}}
    <br>
    <!-- 复选框 -->
    <input type="checkbox" v-model="fruit" value="苹果">:苹果
    <input type="checkbox" v-model="fruit" value="香蕉">:香蕉
    <input type="checkbox" v-model="fruit" value="西瓜">:西瓜
    <input type="checkbox" v-model="fruit" value="榴莲">:榴莲
    <input type="checkbox" v-model="fruit" value="芒果">:芒果
    <div>{{fruit}}</div>

    <!-- 下拉框 -->
    <select v-model="fruit_xl">
        <option value="">请选择需要的水果</option>
        <option value="苹果">苹果</option>
        <option value="香蕉">香蕉</option>
        <option value="西瓜">西瓜</option>
        <option value="榴莲">榴莲</option>
        <option value="芒果">芒果</option>
    </select>
    <div>选择的水果是:{{fruit_xl}}</div>

    <!-- 单选框 -->
    <input type="radio"  name="abc"  v-model="gender" value="男">:男
    <input type="radio"  name="abc"  v-model="gender" value="女">:女{{gender}}
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            shu: '',//输入框的
            fruit: [],//复选框的
            fruit_xl: '',//下拉框的
            gender: ''//单选框
        }
    })
</script>